<template>
  <div class="component">
    <app-header title="" :needBack="true">
    </app-header>
    <div class="photo-content">
      <p class="photo-content-title">上传图片</p>
      <ul class="photo-list">
        <li class="photo-item" v-for="(item, index) in photoList" :key="index">
          <img class="photo" :src="item.src" alt="">
          <span class="remove-btn" @click="removePhoto(index)">x</span>
        </li>
        <li class="photo-item add-btn" v-if="photoList.length < 2" @click="addPhoto">+</li>
      </ul>
      <input type="file" ref="photoFile" @change="uploadPhoto" style="display: none;">
    </div>
    <div class="photo-content preview-content">
      <p class="photo-content-title">上传图片</p>
      <ul class="photo-list">
        <li class="photo-item" v-for="(item, index) in photoList" :key="index">
          <img class="photo" :src="item.src" alt="">
        </li>
      </ul>
    </div>
    <div class="banjie-content">
      <label v-for="(item, index) in banjieList" :key="index">
        <input type="radio" name="banjie" v-model="banjie">{{item.name}}
      </label>
    </div>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'

/**
 * [convertToBlob 将base64转换为二进制文件]
 * @param  {[type]} base64Data [bas64文件]
 * @param  {[type]} type       [二进制文件类型,比如: 'image/jpg']
 * @return {[type]}            [二进制文件]
 */
function convertToBlob(base64Data, type) {
    //去掉base64中的换行符，webkit会自动去除，但是IOS9以及IOS8中不会自动去除，导致转换出错
    base64Data = base64Data.replace(/\s/g, '')

    var text = window.atob(base64Data.split(',')[1])
    var buffer = new ArrayBuffer(text.length)
    var ubuffer = new Uint8Array(buffer)
    for (var i = 0; i < text.length; i++) {
        ubuffer[i] = text.charCodeAt(i)
    }

    var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder
    var blob

    if (Builder) {
        var builder = new Builder()
        builder.append(buffer)
        blob = builder.getBlob(type)
    } else {
        blob = new window.Blob([buffer], {
            type: type
        })
    }
    return blob
}

/**
 * 建立一個可存取到該file的url
 * @param  {[type]} file [description]
 * @return {[type]}      [description]
 */
function getObjectURL(file) {
  var url = null
  if (window.createObjectURL !== undefined) {
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) {
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) {
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

const banjieList = [
  { id: '1', name: '待办结', value: '待办结' },
  { id: '2', name: '申请办结', value: '申请办结' },
  { id: '3', name: '申请无法办结', value: '申请无法办结' },
]

export default {
  name: "",
  data () {
    return {
      photoList: [],
      banjieList: banjieList,
      banjie: ''
    }
  },
  methods: {
    addPhoto () {
      this.$refs.photoFile.click()
    },
    uploadPhoto (e) {
      console.log(1111)
      const value = this.$refs.photoFile.value
      const src = getObjectURL(e.target.files[0])
      if (value) {
        this.photoList.push({
          src: src,
        })
      }
    },
    removePhoto (index) {
      this.photoList.splice(index, 1)
    }
  },
  components: {
    AppHeader
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .article {
    width: 90%;
    margin: auto;
  }
  .remark, .photo-content {
    width: 90%;
    margin: auto;
    font-size: .25rem;
    margin-bottom: .3rem;
    border: 1px solid @border;
    padding: .2rem;
  }
  .photo-content {
    .photo-content-title {
      font-size: .25rem;
      margin-bottom: .1rem;
    }
  }
  .photo-list {
    display: flex;
    flex-wrap: wrap;
    .photo-item {
      width: 1.2rem;
      height: 1.2rem;
      margin-right: .3rem;
      background-color: #dddddd;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      &.add-btn {
        font-size: .7rem;
      }
      .remove-btn {
        position: absolute;
        right: -.1rem;
        top: -.1rem;
        @closeHeight: .4rem;
        width: @closeHeight;
        height: @closeHeight;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: .28rem;
        background-color: @red;
        color: @white;
      }
    }
  }
  .banjie-content {
    width: 90%;
    margin: auto;
    font-size: .25rem;
    margin-bottom: .3rem;
    padding: .2rem;
    label {
      color: #000;
      margin-right: .3rem;
      vertical-align: middle;
    }
    input {
      width: .3rem;
      height: .3rem;
      display: inline-block;
      margin-right: .1rem;
      vertical-align: middle;
    }
  }
</style>
